<template>
	<nav class="navbar navbar-expand-lg bg-body-tertiary">
		<div class="container-fluid">
			<img alt="Vue logo" class="me-1" src="@/assets/logo.png" />
			<a class="navbar-brand" href="#/about">todoList</a>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<router-link class="nav-link" to="/home">代办事项</router-link>
					</li>
					<li class="nav-item">
						<router-link class="nav-link" to="/finsh">已完成</router-link>
					</li>
					<li class="nav-item">
						<router-link class="nav-link" to="/delete">已删除</router-link>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'myHeader',
  methon: {
    jumpAbout () {
      this.$router.push({
        name: 'about1'
      })
    }
  }
})
</script>

<style scoped lang="less">
img {
	width: 20px;
	height: 20px;
	border-radius: 15px;
	box-shadow: 0 2px 2px #ccc;
}

.header {
	display: flex;
	gap: 4px;
	padding: 20px;
	align-items: flex-end;
}
</style>
